<template>
  <div>
    <button @click='goUser()'>user页面</button>
    <button @click='goShop()'>shop页面</button>
    <button @click='goList()'>list页面</button>
    <el-form
    >
      <el-form-item label="添加任务">
        <el-input v-model="zt.title" style="width:300px"></el-input>
      </el-form-item>
    </el-form>
    <h3>任务列表：</h3>
    <ul>
        <li v-for="(item,index) in item" :key="index"  @click="add(item,index)"> <el-checkbox v-model="item.checked" :disabled="item.checked">{{item.title}}</el-checkbox></li>
    </ul>
  </div>
</template>

<script>
export default {
     data() {
      return {
        zt:{
            title:"",
            checked: false,
        },
        item:[
            {
                title:"吃饭",
                 checked: false,
            },
             {
                title:"睡觉",
                checked: false,
            },
             {
                title:"打豆豆",
                checked: false,
            },
        ]
      };
    },
    methods:{
        add(row,index){
            console.log(row,index);
        },
        hc() {
        let src=JSON.parse(JSON.stringify(this.zt))
        //   this.obj.name = this.tableData.name;
        //   this.obj.pasdword = this.tableData.pasdword;
        //   this.obj.eml = this.tableData.eml;
        
        this.item.push(src);
        console.log(this.item);
    },
       keyDown(e){
        //如果是回车则执行登录方法
        if(e.keyCode == 13){
            // 输入框内是否有值
          if(this.zt.title){
            this.hc()
          console.log(this.zt.title);
          }
        }
      },
      goUser(){
      this.$router.push('/user');
    },
    goShop(){
      this.$router.push('/shop');
    },
    goList(){
      this.$router.push('/list');
    },
    },
    mounted(){
        //绑定事件
        window.addEventListener('keydown',this.keyDown);
    },
    destroyed(){
        window.removeEventListener('keydown',this.keyDown,false);
    },
};
</script>

<style lang="less" scoped>
    
</style>